<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="../script/jquery-1.10.min.js"></script>
</head>
<style>
    div {
        margin: 10px;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
</style>
<script>
    window.onload = function () {
        var divss = document.getElementsByTagName("div")

        // todo for
        for (var i = 0; i < divss.length - 1; i++) { //去除最后 一个Div,
            divss[i].style.background = "red"
        }

        var arr = [1, 2, 3, 4]
        for (var ii in arr) {
            console.log(ii, arr[ii])
        }
        for (var iii in divss) {
            console.log(iii, typeof(divss[iii]))
        }

        // todo while
//        var i =0
//        while (i < divss.length){
//            divss[i].style.background ="red"
//            i++
//        }

        // todo 全选
        // todo jquery
        $("#all").click(function () { // todo 添加点击事件
//            console.log($("#all").prop("checked"))
            if ($("#all").prop("checked")) {
                $("#checkall > input").prop("checked", true)
            } else {
                $("#checkall > input").prop("checked", false)
            }
        })

        // todo javascript
//            if (all.checked){
//                var checkall =document.getElementById("checkall")
//                var ss =checkall.querySelectorAll("input")
//                for (i=0;i<ss.length;i++){
//                   ss[i].checked=true
//                }
//            }else{
//                var checkall =document.getElementById("checkall")
//                var ss =checkall.querySelectorAll("input")
//                for (i=0;i<ss.length;i++){
//                   ss[i].checked=false
//                }
//            }

        $("#numbtn").click(function () {
//            console.log($("#num").val());
            var n = $("#num").val();
            var pn = parseInt(n)
            if (isNaN(pn)) {
                alert("输入的不是数字")
                return
            }
//            if (pn > 10 && pn < 100) {
//                alert("输入是的两位数")
//            } else if (pn < 10) {
//                alert("输入是的一位数")
//            }
            switch (true) {
                case (pn > 10 && pn < 100):
                    alert("输入是的两位数");
                    break;         // todo 不使用break,会继续匹配
                case (pn < 10):
                    alert("输入是的一位数");
                    break;
                default:
                    alert("输入是的多位数")
            }
        })

        // todo 三目
        var nTest = 11;
        console.log(nTest > 10 ? "三目1" : "三目2")
//        if (nTest>10){
//            1
//        }else{
//            2
//        }
    }


</script>
<body>

<div>

</div>
<div>

</div>
<div>

</div>

<!--全选-->
<input id="all" type="checkbox" value="全选">全选<br>
<div id="checkall">
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
</div>


<input id="num" type="text" placeholder="input Number">
<div class="btn btn-success" id="numbtn" style="height: 50px">查看数字范围</div>
</body>
</html>